<template>
  <view class="disFlxAC pl-15 py-10 br-12 bgf mx-15 mb-8 itemBox" @click="changeChecked">
    <view v-if="showChecked" class="pr-15 shrink0">
      <image
        :style="isChecked ? 'display:block;' : 'display:none;'"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio-checked2.png"
        class="checkedImg"
      />
      <image
        :style="!isChecked ? 'display:block;' : 'display:none;'"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio.png"
        class="checkedImg"
      />
    </view>
    <view style="flex: 1" class="pr-15">
      <view class="disFlxAC">
        <view class="fz-16 ov-1">{{ userInfo.userName }}</view>
        <view v-if="userInfo.memberLevelName" class="fz-12 professionalTag ml-8 shrink0">
          {{ userInfo.memberLevelName }}
        </view>
        <text
          v-if="userInfo.initRole === InitRoleEnum.PRINCIPALS"
          class="ali-icon fz-18 ml-8 shrink0"
          style="color: #97bfff"
        >
          &#xe63c;
        </text>
      </view>
      <view class="disFlxAC pt-8" v-if="userInfo.companyName">
        <!-- <text
          v-if="userInfo.applyType === ApplyTypeEnum.UNIT"
          class="ali-icon fz-16 shrink0"
          style="color: #ffa944"
        >
          &#xe661;
        </text> -->
        <image
          v-if="userInfo.applyType === ApplyTypeEnum.UNIT"
          class="member-icon fz-16 shrink0"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
        />
        <view class="fz-14 ov-1">{{ userInfo.companyName }}</view>
        <view class="fz-14 shrink0 position ml-8" v-if="userInfo.companyPosition">
          {{ userInfo.companyPosition }}
        </view>
      </view>
    </view>
    <view v-if="showTips || showDel" class="shrink0 disFlxAC pr-5" @click.stop>
      <view v-if="showTips" class="iconImgBox disFlxCC" @click.stop="openTips">
        <image src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/warning.png" style="width: 32rpx; height: 32rpx" />
      </view>
      <view v-if="showDel" class="iconImgBox disFlxCC" @click.stop="delUser">
        <image src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/del-icon.png" style="width: 32rpx; height: 32rpx" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, type PropType, computed, unref } from 'vue';
  import type { MsgUserData } from '@/api/admin/types';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { InitRoleEnum, IsLoginEnum } from '@/enums/admin';
  import { propTypes } from '@/utils/propTypes';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import { useAdminStoreWithOut } from '@/store/modules/admin';

  const props = defineProps({
    userInfo: {
      type: Object as PropType<MsgUserData>,
      default: {},
    },
    // 是否显示勾选
    showChecked: propTypes.bool.def(true),
    // 是否可以删除
    showDel: propTypes.bool.def(false),
  });

  // 判断是否已勾选
  const useAdmin = useAdminStoreWithOut();
  const isChecked = computed(() => {
    const checkedObj = useAdmin.checkedUserList.find((v) => v.userId === props.userInfo.userId);
    return checkedObj ? true : false;
  });
  // 勾选|| 取消勾选
  const changeChecked = () => {
    if (!props.showChecked) return;
    if (unref(isChecked)) {
      useAdmin.checkedUserList = useAdmin.checkedUserList.filter((v) => {
        return v.userId !== props.userInfo.userId;
      });
    } else {
      useAdmin.checkedUserList.push(props.userInfo);
    }
  };
  // 在已选名单删除
  const delUser = () => {
    emits('openDel', props.userInfo);
  };

  const emits = defineEmits(['openTips', 'openDel']);

  const showTips = computed(() => {
    if (
      props.userInfo.isLogin === IsLoginEnum.NO ||
      props.userInfo.isOfficialAccount !== IsOfficialAccountEnum.FOLLOWED ||
      !props.userInfo.phone
    ) {
      return true;
    } else {
      return false;
    }
  });

  const openTips = () => {
    const tipsContent = ref<string[]>([]);
    if (props.userInfo.isLogin === IsLoginEnum.NO) {
      tipsContent.value.push('该用户未登录小程序，无法发送微信公众号消息推送。');
    }
    if (props.userInfo.isOfficialAccount !== IsOfficialAccountEnum.FOLLOWED) {
      tipsContent.value.push('该用户未关注公众号，无法发送微信公众号消息推送。');
    }
    if (!props.userInfo.phone) {
      tipsContent.value.push('该用户未填写手机号，无法发送短信消息。');
    }
    emits('openTips', unref(tipsContent));
  };
</script>

<style lang="scss" scoped>
  .itemBox {
    min-height: 96rpx;
    box-sizing: border-box;
    .shrink0 {
      flex-shrink: 0;
    }
    .checkedImg {
      width: 36rpx;
      height: 36rpx;
      display: block;
    }
    .professionalTag {
      background-color: #f8edd9;
      padding: 0 10rpx;
      border-radius: 4rpx;
    }
    .position {
      color: #aaabab;
    }
    .iconImgBox {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .member-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
</style>
